{% extends "base.html" %}

{% block main %}
<div id="app" class="container">
    <div class="row mt-2">
        <div class="col-md-12">
            <div style="text-align: center;">
                You can use the snapshot service to view historical data. <br>
                Please set start time and end time first, and then click view button.
            </div>
        </div>
    </div>
    
    <div class="row mt-2">
        
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    View Master Snapshot
                </div>
                <div class="card-body">

                    <form action="/master" method="GET">
                        From: <input type="datetime-local" v-model="startTime" name="st" value="startTime" />
                        to: <input type="datetime-local" v-model="endTime" name="et" value="endTime" />
                        <button type="submit" class="btn btn-primary btn-sm" >View</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-12 mt-2">
            <div class="card">
                <div class="card-header">
                    View Server Snapshot
                </div>
                <div class="card-body">

                    <form action="/server" method="GET">
                        Server: 
                        <select name="sId">
                            <option v-for="(d,index) in ds.ds" :value="index" >{% raw %}{{d.ServerName}}{% endraw %}</option>
                        </select>
                        From: <input type="datetime-local" v-model="startTime" name="st" value="startTime" />
                        to: <input type="datetime-local" v-model="endTime" name="et" value="endTime" />
                        <button type="submit" class="btn btn-primary btn-sm" >View</button>
                    </form>

                </div>
                
            </div>
        </div>

        <div id="treemap"  style="height:320px; "></div>
    </div>

</div>
{% endblock %}

{% block vue %}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
               ds:{},

               startTime: '',
               endTime: '',
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                //加载基本数据
                axios.get("/api/getSnapshotInit", {}).then(
                    (res) => {
                        let dd = res.data.data;
                        this.ds = dd.ds;
                        this.startTime = this.formatTimeT(new Date(dd.tsRange.st));
                        this.endTime = this.formatTimeT(new Date(dd.tsRange.et));
                        console.log(dd)
                    })
                    .catch(function (error) { console.log(error); });

            },

            formatTimeT(date) {
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const hour = date.getHours()
                const minute = date.getMinutes()
                const second = date.getSeconds()

                return [year, month, day].map(this.formatNumber).join('-') + 'T' + [hour, minute].map(this.formatNumber).join(':')
            },
            formatNumber(n) {
                n = n.toString()
                return n[1] ? n : '0' + n
            }
        },
    })
</script>
{% endblock %}